<template>
  <div class="swiper">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="image of images" :key="image.id">
        <a :href="image.img_href ? image.img_href : `javascript:void(0)`">
          <img :src="image.img_url" class="swiper-img" alt="" />
        </a>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { getSwiper } from "@/api/api";

export default {
  name: "HomeSwiper",
  components: {},
  data() {
    return {
      images: []
    };
  },
  mounted() {
    getSwiper()
      .then(res => {
        this.images = res.data;
      })
      .catch(err => {
        console.log(err);
      });
  },
  destroyed() {}
};
</script>

<style scoped lang="stylus">
.swiper
  margin-top 54px
  .van-swipe
    height: 100%

    .van-swipe__track
      position absolute
      left: 0
      top: 0
      height:100%

  .swiper-img
    width 100%
    height:100%
</style>
